<template >
    <div >
        <div class="page-header">
            <Form ref="formInline" :model="form" inline>
                <FormItem >
                    <Select v-model="form.area" style="width:200px" placeholder="选择区域">
                        <Option v-for="item in areaList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </FormItem>
                <FormItem>
                    <Select v-model="form.nature" style="width:200px"
                    placeholder="选择机构性质">
                        <Option v-for="item in natureList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </FormItem>
                <FormItem >
                    <Select v-model="form.type" style="width:200px"
                    placeholder="选择机构类型" >
                        <Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </FormItem>
                <FormItem >
                    <Input v-model="form.keyword" placeholder="关键字" style="width: 200px" />
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="search('form')">搜索</Button>
                </FormItem>
            </Form>
        </div>
        <div class="page-content">
            <Row >
                <Col span="24" class="lyx-mb10">

                    <div v-for="(item, index) in list1" :key="'a' + index">
                        <Row >
                            <Col span="4" style="text-align:center;">
                                <img :src="item.img" width="100" height="100">
                            </Col>
                            <Col span="20" style="height:100px;">
                                <div style="font-size:16px;line-height:36px;">
                                    <span style="margin-right:15px;">{{item.title}}</span>
                                    <template v-for="(i,index1) in item.tags">
                                        <Tag :color="i.type" :key="index1">{{i.label}}</Tag>
                                    </template>
                                </div>
                                <div style="font-size:14px;line-height:24px;">{{item.content}}</div>
                                <div style="margin-top:10px;">
                                    <Button type="primary" @click="info(item)">查看详情</Button>
                                </div>
                            </Col>
                        </Row>
                        <Divider />
                    </div>
                </Col>
            </Row>
            <Row type="flex" justify="space-between" class="lyx-mb10">
                <Col span="12">
                </Col>
                <Col span="12">
                    <Page :total="pageTotal" show-total @on-change="change"
                    :page-size="2"
                    />
                </Col>
            </Row>
        </div>

<Modal
    v-model="infoVisible"
    title="机构详情"
    width="700"
    :footer-hide="true"
    @on-ok="ok"
    @on-cancel="cancel">
    <Tabs type="card">
        <TabPane label="机构介绍">
            <div style="padding:20px;">
              <div style="font-size:16px;line-height:36px;">{{current.title}}</div>
              <div style="font-size:14px;line-height:36px;"> <Icon type="ios-call" /> {{current.mobile}}</div>
              <div style="font-size:14px;line-height:36px;cursor:pointer;"
              @click="position"
              > <Icon type="md-pin" /> {{current.address}}</div>
              <div style="font-size:14px;line-height:36px;text-indent:2em;">{{current.content1}}</div>
            </div>
        </TabPane>
        <TabPane label="入住条件">
          <div v-html="current.residenceConditions" style="padding:20px;font-size:14px;line-height:24px;">
          </div>
        </TabPane>
        <TabPane label="设施设备" >
          <div style="padding:20px;font-size:14px;line-height:36px;">
            <div style="cursor:pointer;" @click="showImg('cwxx')"><Icon type="ios-body" /> 床位信息（{{current.cwxx}}）</div>
            <div style="cursor:pointer;" @click="showImg('fjxx')"><Icon type="md-home" /> 房间信息（{{current.fjxx}}）</div>
            <div style="cursor:pointer;" @click="showImg('ydss')"><Icon type="ios-tennisball" /> 运动设施（{{current.ydss}}）</div>
            <div style="cursor:pointer;" @click="showImg('ylss')"><Icon type="md-radio" /> 娱乐设施（{{current.ylss}}）</div>
            <div style="cursor:pointer;" @click="showImg('stxx')"><Icon type="ios-restaurant" /> 食堂信息（{{current.stxx}}）</div>
          </div>
        </TabPane>
        <TabPane label="收费标准">
          <div style="padding:20px;font-size:14px;line-height:36px;">
              <div v-for="(item, index) in current.charges" :key="index">
                {{item.label}}
                <span style="cursor:pointer;margin-left:20px;"
                @click="showImg('sfbz_' + item.id)"
                >查看详情</span>
              </div>
          </div>
        </TabPane>
        <TabPane label="从业人员">
          <Row style="text-align:center;margin-top:20px;">
            <Col :span="6" v-for="(item, index) in current.employees" :key="index">
              <img :src="item.photo" width="150" height="200">
              <div style="font-size:16px;margin-top:10px;">
                {{item.name}} <Tag style="margin-left:10px;" color="success">{{item.position}}</Tag>
              </div>
            </Col>
          </Row>
          <Row type="flex" justify="space-between" class="lyx-mb10" style="margin-top:30px;">
              <Col span="12">
              </Col>
              <Col span="12">
                  <Page :total="10" show-total :page-size="8" />
              </Col>
          </Row>
        </TabPane>
        <TabPane label="入住人员">
          <Row>
            <Col span="12">
              &nbsp;
            </Col>
            <Col span="12">
              <Form ref="formInline" :model="form1" inline>
                  <FormItem >
                      <Input v-model="form1.keyword" placeholder="人员名称" style="width: 200px" />
                  </FormItem>
                  <FormItem>
                      <Button type="primary" @click="search1('form1')">搜索</Button>
                  </FormItem>
              </Form>
            </Col>
          </Row>
          <Row style="text-align:center;">
            <Col :span="6" v-for="(item, index) in current.users" :key="'c' + index">
              <img :src="item.photo" width="150" height="200">
              <div style="margin-top:5px; font-size:14px;">{{item.name}} {{item.sex}} {{item.age}}</div>
              <div style="cursor:pointer;color:#1999e9;" @click="showImg('ckxq_' + item.id)">查看详情</div>
            </Col>
          </Row>
          <Row type="flex" justify="space-between" class="lyx-mb10" style="margin-top:10px;">
                <Col span="12">
                </Col>
                <Col span="12">
                    <Page :total="30" show-total :page-size="8" />
                </Col>
          </Row>
        </TabPane>
    </Tabs>
</Modal>

<Modal
    v-model="userVisible"
    title="人员详情"
    width="700"
    @on-ok="ok1"
    @on-cancel="cancel1">
</Modal>

<Modal
    v-model="imgVisible"
    title="详情"
    :footer-hide="true"
    width="700">
    <img :src="currentImg" width="100%">
</Modal>

<Modal
    v-model="mapVisible"
    title="位置信息"
    :footer-hide="true"
    width="700">
    <el-amap vid="amap" :zoom="zoom" :center="center" class="amap-wrapper" >
      <el-amap-marker vid="index_center" :position="center" ></el-amap-marker>
    </el-amap>
</Modal>

    </div>
</template>

<script>
export default {
  data () {
    return {
      zoom: 17,

      center: [123.456629, 41.83892],

      form: {

      },

      form1: {

      },

      areaList: [
        { value: '1', label: '皇姑区' },
        { value: '2', label: '大东区' },
        { value: '3', label: '铁西区' },
        { value: '4', label: '沈河区' }
      ],

      typeList: [
        { value: '1', label: '养老院' }
      ],

      natureList: [
        { value: '1', label: '民办' },
        { value: '2', label: '公立' }
      ],

      result: [],

      list: [
        {
          id: '1',
          title: '金太阳养老服务中心',
          img: '/aged/yly1.png',
          mobile: '13333333333',
          address: '沈阳皇姑长客 皇姑区鸭绿江街16号',
          area: '2',
          type: '1',
          nature: '1',
          tags: [
            { label: '大东', type: 'success' },
            { label: '民办', type: 'success' },
            { label: '养老院', type: 'success' }
          ],
          content: '金太阳养老产业成立于2010金太阳养老产业集团创立于2011年，打造专业管理及运营团队，努力实现中国养老2025发展规划。',
          content1: '金太阳养老产业集团创立于2011年，是集高端连锁医养公寓、候鸟旅居、居家养老服务以及健康城镇开发，老年终身教育以及专业人才培训等相关多元化发展的养老产业集团。',
          residenceConditions: '一、入住老人自愿入院。如退院则由本人及家属提出申请，子女及全家人同意方可出院。<br>二、入住老人及家属监护人员交身份证复印件一张、老人乙肝化验单，说明并无精神病、传染病。由老人监护人员与院方签申请表一份、协议书一式两份。<br>三、有精神病、传染病的患者不得入住。<br>四、院方提供被套、床单、枕套。入住老人需自带棉被、枕心、脸盆、毛巾、水杯、香皂等日用品及四季换洗衣服。其他多余物品，请不要带入敬老院。<br>五、入住老人不得将电器带入敬老院。若确实需要，经院方同意方可带入使用，全部费用（包括电费）由家属担负。<br>六、敬老院对老人提供流动服务与呼叫服务相结合。老人及子女若有增项服务，应该与院方协商。<br>七、入住老人如果不习惯院里生活，可以出院，费用按天数退还。',
          cwxx: 10,
          fjxx: 14,
          ydss: 12,
          ylss: 16,
          stxx: 10,
          charges: [
            {
              id: 1,
              label: '双人套间 床费 1900-2100 / 人'
            },
            {
              id: 2,
              label: '单人间 2500 元'
            }
          ],
          employees: [
            {
              id: 1,
              name: '王江阿',
              position: '副院长',
              photo: '/aged/cyry_1.png'
            },
            {
              id: 2,
              name: '何方',
              position: '护工',
              photo: '/aged/cyry_2.png'
            },
            {
              id: 3,
              name: '刘欣',
              position: '医生',
              photo: '/aged/cyry_3.png'
            },
            {
              id: 4,
              name: '张都万',
              position: '医生',
              photo: '/aged/cyry_4.png'
            }
          ],
          users: [
            {
              id: 1,
              name: '陶厂君',
              photo: '/aged/rzry_1.png',
              sex: '男',
              age: 72
            },
            {
              id: 2,
              name: '王香',
              photo: '/aged/rzry_2.png',
              sex: '女',
              age: 65
            },
            {
              id: 3,
              name: '刘卫国',
              photo: '/aged/rzry_3.png',
              sex: '男',
              age: 74
            },
            {
              id: 4,
              name: '张嘉佳',
              photo: '/aged/rzry_4.png',
              sex: '男',
              age: 66
            }
          ]
        },
        {
          id: '2',
          title: '安居住百姓养老院',
          img: '/aged/yly2.png',
          mobile: '13333333333',
          address: '沈阳皇姑长客 皇姑区鸭绿江街16号',
          area: '3',
          type: '1',
          nature: '2',
          tags: [
            { label: '铁西', type: 'warning' },
            { label: '公立', type: 'primary' },
            { label: '养老院', type: 'success' }
          ],
          content: '安居住百姓养老院是一所养老公寓，养老大学，多家候鸟公馆相结合的高端养老综合体。',
          cwxx: 10,
          fjxx: 14,
          ydss: 12,
          ylss: 16,
          stxx: 10,
          charges: [
            {
              id: 1,
              label: '双人套间 床费 1900-2100 / 人'
            },
            {
              id: 2,
              label: '单人间 2500 元'
            }
          ]
        },

        {
          id: '3',
          title: '安居住百姓养老院333',
          img: '/aged/yly3.png',
          mobile: '13333333333',
          address: '沈阳皇姑长客 皇姑区鸭绿江街16号',
          area: '1',
          type: '1',
          nature: '1',
          content: '222安居住百姓养老院是一所养老公寓，养老大学，多家候鸟公馆相结合的高端养老综合体。',
          cwxx: 10,
          fjxx: 14,
          ydss: 12,
          ylss: 16,
          stxx: 10,
          charges: [
            {
              id: 1,
              label: '双人套间 床费 1900-2100 / 人'
            },
            {
              id: 2,
              label: '单人间 2500 元'
            }
          ]
        }
      ],

      infoVisible: false,

      userVisible: false,

      imgVisible: false,

      mapVisible: false,

      pageNo: 1,
      pageSize: 1,

      current: {},
      currentImg: '',

      columns4: [
        {
          title: 'Name',
          key: 'name'
        },
        {
          title: 'Age',
          key: 'age'
        },
        {
          title: 'Address',
          key: 'address'
        }
      ],
      data1: [
        {
          id: 11,
          name: 'John Brown',
          age: 18,
          address: 'New York No. 1 Lake Park',
          date: '2016-10-03'
        },
        {
          name: 'Jim Green',
          age: 24,
          address: 'London No. 1 Lake Park',
          date: '2016-10-01'
        },
        {
          name: 'Joe Black',
          age: 30,
          address: 'Sydney No. 1 Lake Park',
          date: '2016-10-02'
        },
        {
          name: 'Jon Snow',
          age: 26,
          address: 'Ottawa No. 2 Lake Park',
          date: '2016-10-04'
        }
      ]
    }
  },

  computed: {

    list1 () {
      let arr = []
      let i = (this.pageNo - 1) * 2
      const j = i + 2
      for (; i < j; i++) {
        if (i === this.result.length) break
        arr.push(this.result[i])
      }

      console.log(arr)
      return arr
    },

    pageTotal () {
      return this.result.length
    }

  },
  mounted () {
    this.list.forEach(item => {
      this.result.push(item)
    })
  },
  methods: {
    handleSelectAll (status) {
      this.$refs.selection.selectAll(status)
    },
    tableSelectChange (selection) {
      console.log(selection)
    },
    delSelect () {

    },

    search () {
      this.pageNo = 1
      const keys = Object.keys(this.form)

      this.result = []
      if (keys.length === 0) {
        this.result = this.list
      } else {
        for (let i = 0; i < this.list.length; i++) {
          const obj = this.list[i]
          let flag = false
          for (let j = 0; j < keys.length; j++) {
            let k = keys[j]
            if (obj[k] === this.form[k]) {
              flag = true
            } else {
              flag = false
              break
            }
          }
          if (flag) {
            this.result.push(obj)
          }
        }
      }
    },

    info (item) {
      this.current = item
      this.infoVisible = true
    },

    ok () {

    },

    cancel () {
      this.infoVisible = false
    },

    userInfo (item) {
      this.userVisible = true
      console.log(item)
    },

    ok1 () {

    },

    cancel1 () {
      this.userVisible = false
    },

    change (pageNo) {
      console.log(pageNo)
      this.pageNo = pageNo
    },

    showImg (what) {
      console.log('cwxx')
      this.currentImg = '/aged/' + what + '.png'
      this.imgVisible = true
    },

    ok2 () {

    },

    cancel2 () {
      this.imgVisible = false
    },

    position () {
      this.mapVisible = true
    }

  }
}
</script>

<style scoped>
    .page-header{
        margin-bottom: 20px;
    }
    .lyx-mr10{
        margin-right: 10px;
    }
    .lyx-mb10{
        margin-bottom: 10px;
    }
    .amap-wrapper {
      width: 100%;
      height: 400px;
    }
</style>
